import React, { PureComponent } from "react"

class PriceForm extends PureComponent {
  // state = {
  // isEdit: !!this.props.item
  // title: this.props.item ? this.props.item.title : "",
  // price: this.props.item ? this.props.item.price : "",
  // date: this.props.item ? this.props.item.date : ""
  // }

  // componentDidMount() {
  //   const { id } = this.props.match.params
  //   this.props.actions.getCreateData(id).then(({ categories, editItem }) => {
  //     const { title, price, date } = editItem
  //     this.setState({
  //       title,
  //       price,
  //       date
  //     })
  //   })
  // }

  handleSubmit = event => {
    event.preventDefault()
    const { item } = this.props
    const { isEdit, title, price, date } = this.props
    if (!title.trim()) {
      this.props.onAlert("标题不能为空")
    } else if (!price.toString().trim()) {
      this.props.onAlert("金额不能为空")
    } else if (Number(price) < 0) {
      this.props.onAlert("金额不能为负数")
    } else if (!date.trim()) {
      this.props.onAlert("日期不能为空")
    } else if (isEdit) {
      this.props.onFormSubmit(
        {
          ...item,
          title,
          price: Number(price),
          date
        },
        isEdit
      )
    } else {
      this.props.onFormSubmit(
        {
          title,
          price: Number(price),
          date
        },
        isEdit
      )
    }
  }

  render() {
    const { title, price, date } = this.props
    return (
      <form onSubmit={this.handleSubmit}>
        <div className="form-group row">
          <label className="col-1 m-0 col-form-label" htmlFor="title">
            标题 *
          </label>
          <input
            type="text"
            className="form-control col-5"
            id="title"
            onChange={this.props.onChangeInputValue}
            value={title}
            placeholder="请输入标题"
          />
        </div>
        <div className="form-group row">
          <label className="col-1 m-0 col-form-label" htmlFor="price">
            金额 *
          </label>
          <div className="input-group col-5 p-0">
            <div className="input-group-prepend">
              <span className="input-group-text">¥</span>
            </div>
            <input
              type="number"
              className="form-control"
              defaultValue={price}
              id="price"
              placeholder="请输入金额"
              onChange={this.props.onChangeInputValue}
            />
          </div>
        </div>
        <div className="form-group row">
          <label className="col-1 m-0 col-form-label" htmlFor="date">
            日期 *
          </label>
          <input
            className="form-control col-5"
            type="date"
            id="date"
            onChange={this.props.onChangeInputValue}
            value={date}
          />
        </div>
        <div className="formgroup row mt-2">
          <button type="submit" className="btn btn-primary ml-3">
            提交
          </button>
          <button
            onClick={event => this.props.onCancelSubmit()}
            type="button"
            className="btn btn-secondary ml-4"
          >
            取消
          </button>
        </div>
      </form>
    )
  }
}

export default PriceForm
